<template>
<div class="flex-parent">
  <div class="wrapper">
  <div class="promo-container">
        <div class="promo-item">
      <h2>好物推荐</h2></div>
    </div>
    <div
      v-for="(item, index) in first12Goods"  
      :key="index"  
      @click="gotoGoods(item.id)"
      class="grid-content ep-bg-purple"  
    >  
      <div class="image-container">  
        <el-image  
          class="productImg"  
          :src="Path.imgPath + item.imgs"  
          :fit="item.fit" 
        />  
        <div class="product-image-text">
          {{ item.description }}
        </div>  
      </div>  
    </div>
  </div>
</div>


</template>  
  
<script setup>  
import { ref, computed,reactive, watch} from 'vue';
import { get } from "@/plugins/axios"
import { useRouter } from 'vue-router';
import { Path } from '@/constant';
const router = useRouter();
const goods = ref([])
const gotoGoods = (id)=>{
router.push({name:'Store',query:{goodsID:id}})
}
getGoods()
function getGoods(){
  get(Path.goodsRecommend,null ,content => {
    goods.value = content
  })
}
const first12Goods = computed(() => {  
return goods.value.slice(0, 12);  
}); 
</script> 
  
<style scoped lang="scss">  
.image-container {  
  display: flex;  
  flex-direction: column; // 使子元素垂直排列  
  align-items: center; // 水平居中  
  text-align: center; // 确保文本在容器中水平居中  
  background-color: #ffffff;
}  
  
.image {  
  width: 60px;  
  height: 48px;  
  margin-bottom: 10px; // 在图像和文本之间添加一些间距  
  border-radius: 4px;
}  
.productImg{
    width: 260px;
    height: 270px;
    margin-bottom: 10px;
    border-radius: 4px;
}  
.image-text {  
  // 你可以在这里添加一些样式来美化文本  
  color: #333; // 文本颜色  
  font-size: 14px; // 文本字体大小  
}  
.product-image-text{  
  // 你可以在这里添加一些样式来美化文本  
  color: #333; // 文本颜色  
  font-size: 13px; // 文本字体大小  
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}  
  
.wrapper {  
  display: flex;  
  flex-wrap: wrap; // 允许子元素换行  
  justify-content: space-between;
  gap: 10px;
}  
  
.grid-content {  
  border-radius: 4px;  
  min-height: 192px; // 根据需要调整  
  width: calc(25% - 10px);  
  background-color: #ffffff; // 或你想要的任何颜色  
  display: flex;  
  flex-direction: column; // 如果你想让图像和文本垂直排列（这在这个例子中已经是默认的）  
  align-items: center; // 水平居中（如果你想要的话）  
  justify-content: flex-start; // 从上到下排列子元素  
  padding: 10px; // 为内容添加一些内边距（可选）  
  margin-left: 0px;
}  
  
.flex-parent { 
display: flex;  
justify-content: center; /* 水平居中 */  
align-items: center; /* 如果需要垂直居中 */  
// height: 100vh; /* 假设父容器占满视口高度 */  
width: 100%; /* 父容器宽度 */  
max-width: 1200px;
margin: 0 auto;
padding: 20px;
flex-wrap: wrap;

}

.grid-content:hover {  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  .image {  
    // 使用transform放大图片  
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果  
  }  
  .productImg{
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果 
  }
  .image-text {  
    // 放大文字并加深颜色  
    // font-size: 16px; // 根据需要调整字体大小  
    color: #000; // 加深文字颜色
    font-weight: 800; 
    transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果  
  }
  .product-image-text{
    // 你可以在这里添加一些样式来美化文本  
    color: #000; // 文本颜色 
    font-weight: 800;  
    // font-size: 12px; // 文本字体大小  

    transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果 
  }   
}
.promo-container {  
  // 根据需要设置宽度、高度、边距等  
  width: 100%; // 或者根据需求设置其他宽度  
  text-align: center; // 确保文本居中  
  padding: 20px 0; // 上下内边距，根据需要调整  
  // 如果需要，还可以添加边框、背景色等样式  
}  

//输入框样式
.input {
height: 36px;
width: 75%;
border-radius: 4px;
}


::v-deep .el-popover{
min-width:500px;
}
</style>